<template>
  <a-drawer
    :visible="visible"
    class="custom-class"
    placement="right"
    @close="btnClose"
    :keyboard="false"
    :width="$store.getters.isMobile ? 320 : 800"
    :body-style="{
      height: 'calc(100% - 110px)',
      boxSizing: 'border-box',
      overflowY: 'auto',
    }"
    :headerStyle="{
      padding: '0 24px',
    }"
    :destroyOnClose="true"
  >
    <template #title>
      <a-tabs v-model:activeKey="activeTab">
        <a-tab-pane
          v-for="item of tabList"
          :disabled="item.disabled"
          :key="item.key"
          :tab="item.text"
        ></a-tab-pane>
      </a-tabs>
    </template>
    <a-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      layout="vertical"
      v-show="activeTab === 'basic'"
    >
      <a-spin :spinning="spinning">
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="姓名" name="name">
              <a-input v-model:value="formData.name" placeholder="请输入姓名" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="手机号" name="phone">
              <a-input
                v-model:value="formData.phone"
                placeholder="请输入手机号"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="所属业户" name="owner_id">
              <TenantComponent
                  :ownerId="formData.owner_id || ownerInfo.id"
                  :types="id ? true : false"
                  :titleser="'所属业户'"
                  @selectcancel="Selectcancel"
                  @request="$utils.commonRequest"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="身份" name="type">
              <a-select
                placeholder="请选择身份"
                v-model:value="formData.type"
                :options="optionsType"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="邮箱" name="email">
              <a-input
                type="email"
                v-model:value="formData.email"
                placeholder="请输入邮箱"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="证件类型">
              <a-select
                v-model:value="formData.idcard_type"
                :options="cardList"
                placeholder="请选择证件类型"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item name="idcard">
              <template #label>
                <a-row justify="space-between" style="width: 100%">
                  <a-col>证件号码：</a-col>
                  <a-col>
                    <a-button
                      v-if="readerConnected"
                      type="link"
                      style="
                        padding: 0;
                        margin: 0;
                        border: none;
                        height: 22px;
                        line-height: 22px;
                      "
                      @click="showIDCardReader"
                      >读取证件</a-button
                    >
                    <a-tooltip v-else>
                      <template #title
                        >请先连接上身份证阅读器，目前支持《精伦IDR210居民身份阅读器》。</template
                      >
                      <a-button
                        type="link"
                        style="
                          padding: 0;
                          margin: 0;
                          border: none;
                          height: 22px;
                          line-height: 22px;
                        "
                        @click="showIDCardReader"
                        :disabled="!readerConnected"
                        >读取证件</a-button
                      >
                    </a-tooltip>
                  </a-col>
                </a-row>
              </template>
              <a-input
                v-model:value="formData.idcard"
                placeholder="请输入证件号码"
                @blur="idCardInputBlur"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="出生日期">
              <a-input-group compact>
                <a-input
                  v-model:value="formData.birth_year"
                  style="width: 33%"
                  placeholder="请输入年份"
                  suffix="年" />
                <a-input
                  v-model:value="formData.birth_month"
                  placeholder="请输入月份"
                  style="width: 33%"
                  suffix="月" />
                <a-input
                  v-model:value="formData.birth_day"
                  placeholder="请输入日"
                  style="width: 33%"
                  suffix="日" /></a-input-group></a-form-item
          ></a-col>
          <a-col :span="12">
            <a-form-item label="性别" name="sex">
              <a-select
                v-model:value="formData.sex"
                :options="sexList" /></a-form-item
          ></a-col>
          <a-col :span="12" style="margin-bottom: 20px">
            <a-form-item label="状态" name="status">
              <a-select
                v-model:value="formData.status"
                :disabled="!id"
                :options="statusList" /></a-form-item
          ></a-col>
          <a-col :span="4">
            <a-form-item>
              <template #label>
                <span>人脸照片</span>
                <text-tip
                  :tips="[
                    '用于人脸识别场景，例如人脸门禁。',
                    '照片要求：',
                    '1. 露出额头及耳朵，人脸正面免冠近期大头照；',
                    '2. 照片白底、无逆光、无PS，无过度美颜处理',
                    '3. 照片调整像素为640*480或以上；',
                    '4. 两眼之间的像素点＞60。',
                  ]"
                ></text-tip>
              </template>
              <a-row>
                <div v-if="formData.photo" class="photo-card">
                  <img
                    v-if="formData.photo"
                    class="img"
                    :src="formData.photo"
                  />
                  <div class="mask" v-if="formData.photo">
                    <a-space>
                      <a :href="formData.photo" target="_blank">
                        <EyeOutlined class="icon"
                      /></a>
                      <DeleteOutlined class="icon" @click="clearPhoto" />
                    </a-space>
                  </div>
                </div>
                <PhotoUpload
                  v-if="!formData.photo"
                  @request="$utils.commonRequest"
                  :staticPathes="$utils.staticPathes"
                  :imgAction="$utils.imgAction"
                  :token="$store.getters.token"
                  accept="image/jpg,image/jpeg,image/gif,image/png"
                  @successPhoto="successPhoto"
                />
              </a-row>
            </a-form-item>
          </a-col>
          <a-col :span="20">
            <a-form-item name="idcard_img">
              <template #label>
                <span>证件照片</span>
                <text-tip
                  tips="支持识别身份证正面覆盖填入基本信息，点击身份证人像面，选择身份证正面图片后上传即可。"
                ></text-tip>
              </template>
              <div class="card-content">
                <a-popover
                  placement="bottom"
                  v-for="(item, index) in cardImg"
                  :key="index"
                  :visible="item.visible"
                  @visibleChange="
                    (show) => {
                      if (!formData.idcard_img[item.key] || !show) {
                        item.visible = show;
                      }
                    }
                  "
                >
                  <template #content>
                    <PhotoUpload
                      @request="$utils.commonRequest"
                      :staticPathes="$utils.staticPathes"
                      :imgAction="$utils.imgAction"
                      :token="$store.getters.token"
                      accept="image/jpg,image/jpeg,image/gif,image/png"
                      @successPhoto="
                        (url) => {
                          successIdPhoto(url, item.key);
                        }
                      "
                    />
                  </template>
                  <div v-if="!formData.idcard_img[item.key]" class="card-box">
                    <div class="card-upload">
                      <img :src="`${item.src}`" />
                      <span class="font-gary">{{ item.title }}</span>
                    </div>
                  </div>
                  <div v-else class="card-img">
                    <img class="img" :src="formData.idcard_img[item.key]" />
                    <div class="mask">
                      <a-space>
                        <a
                          :href="formData.idcard_img[item.key]"
                          target="_blank"
                        >
                          <EyeOutlined class="icon"
                        /></a>
                        <DeleteOutlined
                          class="icon"
                          @click="
                            () => {
                              formData.idcard_img[item.key] = '';
                            }
                          "
                        />
                      </a-space>
                    </div>
                  </div>
                </a-popover>
              </div>
            </a-form-item>
          </a-col>
        </a-row>
      </a-spin>
      <div class="drawer-footer">
        <a-button class="mr-10" @click.prevent="btnClose">取消</a-button>
        <a-button :loading="editLoading" type="primary" @click.prevent="btnOk"
          >保存</a-button
        >
      </div>
    </a-form>

    <homeBasedForm
      :id="id"
      @success="saveForm"
      :params="homeBasedFormParams"
      @closeExtend="activeTab = 'basic'"
      v-if="activeTab == 'homebased'"
    />

    <!-- 身份证读卡器 -->
    <IDCardReader
      :visible="IDCardReaderVisible"
      @onClose="closeIDCardReader"
      @confirm="confirmIDCardReader"
      @onConnect="onReaderConnect"
    />

    <!-- 识别替换 -->
    <a-modal
      :visible="resultVisible"
      title="是否需要覆盖提取的内容"
      :destroyOnClose="true"
      okText="覆盖"
      @ok="handleUpdateText"
      @cancel="resultVisible = false"
    >
      <p>
        姓名：<span class="link" @click="handleTextCopy(resultInfo.name)">{{
          resultInfo.name
        }}</span>
      </p>
      <p>
        证件号码：<span class="link" @click="handleTextCopy(resultInfo.id)">{{
          resultInfo.id
        }}</span>
      </p>
      <p v-if="resultInfo.gender">
        性别：<span>{{ resultInfo.gender }}</span>
      </p>
    </a-modal>
  </a-drawer>
</template>

<script>
import homeBasedForm from "./HomeBasedForm.vue";
import { message } from "ant-design-vue";
import {
  defineComponent,
  reactive,
  ref,
  computed,
  watch,
  toRaw,
  toRefs,
  getCurrentInstance,
  onMounted,
} from "vue";
import request from "../../../../common/utils/request";
import {
  PlusOutlined,
  MinusCircleOutlined,
  DeleteOutlined,
  EyeOutlined,
  DiffFilled,
} from "@ant-design/icons-vue";
import { TextTip, PhotoUpload, TenantComponent } from "bl-common-vue3";
import BLCOMMON from "bl-common-vue3";
import _ from "lodash";
import store from "../../../../store";
// import PhotoUpload from "./PhotoUpload.vue";
import { IDCardReader } from "bl-common-vue3";
import { CARD_OPTIONS, SEX_OPTIONS } from "@/common/utils/constant";
import utils from "@/common/utils/utils";

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = (error) => reject(error);
  });
}

export default defineComponent({
  name: "HouseholdEdit",
  components: {
    PlusOutlined,
    TextTip,
    MinusCircleOutlined,
    DeleteOutlined,
    EyeOutlined,
    PhotoUpload,
    IDCardReader,
    homeBasedForm,
    DiffFilled,
    TenantComponent,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [Number, String],
      default: 0,
    },
    ownerId: {
      type: [Number, String],
      default: 0,
    },
    ownerInfo: {
      type: Object,
      default: () => ({}),
    },
    scene: {
      type: String,
      default: "",
    },
  },
  setup(props, context) {
    const title = computed(() => (props.id ? "编辑" : "添加") + "业户人员");

    const formRef = ref();
    const btnClose = () => {
      context.emit("onCancel");
    };

    const formData = reactive({
      name: "",
      phone: "",
      type: undefined,
      owner_id: undefined, // 所属租客
      photo: "",
      birth_year: "",
      birth_month: "",
      birth_day: "",
      sex: 1,
      status: 1,
      idcard: "",
      idcard_type: "idcard",
      email: "",
      edu_type: 3, //学历 默认本科
      work_year: "", //工作年限
      grad_school: "", //毕业院校
      sk_cert: [], // 技能证书信息
      idcard_img: {
        front_url: "",
        back_url: "",
        hand_url: "",
      },
    });

    const required = [
      {
        required: true,
        message: "必填项",
      },
    ];
    const idCardRule = [
      {
        pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
        message: "你的身份证格式不正确",
      },
    ];
    const rules = ref({
      name: required,
      phone: required,
      owner_id: required,
      type: required,
      idcard: idCardRule,
    });

    watch(
      () => formData.idcard_type,
      (val) => {
        if (val == "idcard") {
          rules.value.idcard = idCardRule;
        } else {
          delete rules.value.idcard;
        }
      }
    );

    const state = reactive({
      homeBasedFormParams: {},
      optionsType: [],
      ownerList: [], // 租客列表
      ownerInput: "",
      sexList: SEX_OPTIONS,
      statusList: STATUS_OPTIONS,
      cardList: CARD_OPTIONS,
      defaultList: [
        {
          value: 0,
          label: "否",
        },
        {
          value: 1,
          label: "是",
        },
      ],
      tabList: tabsHeader,
      activeTab: "basic",
      spinning: false,
      editLoading: false,
      IDCardReaderVisible: false,
      readerConnected: false,
      cardImg: [
        {
          src: utils.staticPath + "images/contract/renxiang.png",
          title: "上传身份证人像面",
          key: "front_url",
        },
        {
          src: utils.staticPath + "images/contract/guohui.png",
          title: "上传身份证国徽面",
          key: "back_url",
        },
        {
          src: utils.staticPath + "images/contract/shouchi.png",
          title: "上传手持身份证照",
          key: "hand_url",
        },
      ],
      resultInfo: {},
      resultVisible: false,
      fetching: false,
    });

    const diabledOwner = computed(() => !!props.ownerInfo.id);

    const typeList = () => {
      if (state.optionsType.length) {
        if (!props.id) {
          formData.type = state.optionsType[0].value;
        }
        return;
      }
      request.get("/village", "/user/type/list").then((res) => {
        state.optionsType = res.typeList.map((item) => {
          return {
            value: item.type,
            label: item.info,
          };
        });
        if (!props.id) {
          formData.type = state.optionsType[0].value;
        }
      });
    };

    const clearPhoto = () => {
      formData.photo = "";
    };

    const successPhoto = ({ url }) => {
      formData.photo = url;
    };

    // 编辑详情
    let detail = {};

    const getDetail = () => {
      if (props.id) {
        state.spinning = true;
        request
          .get("/village", "/org/user/detail", { id: props.id })
          .then((res) => {
            detail = res.user;
            setModelRef({
              name: detail.name,
              phone: detail.phone,
              type: detail.type,
              owner_id: detail.owner_id,
              photo: detail.photo,
              birth_year: detail.birth_year,
              birth_month: detail.birth_month,
              birth_day: detail.birth_day,
              sex: detail.sex,
              status: detail.status,
              idcard: detail.idcard,
              idcard_type: detail.idcard_type || undefined,
              idcard_img: detail.idcard_img,
              email: detail.email,
              edu_type: detail.edu_type,
              work_year: detail.work_year,
              grad_school: detail.grad_school,
            });
            state.homeBasedFormParams = {
              owner_id: detail.owner_id,
              village_id: detail.village_id,
              user_id: detail.user_id,
            };
            state.spinning = false;
          })
          .catch(() => {
            state.spinning = false;
          });
      }
    };
    const setModelRef = (state) => {
      for (let key in state) {
        formData[key] = state[key];
      }
    };

    const idCardInputBlur = () => {
      if (formData.idcard_type == "idcard") {
        getBirthdayFromIdCard();
      }
    };

    const getBirthdayFromIdCard = () => {
      let idCard = formData.idcard;
      if (!idCard && idCard.length < 15) {
        return;
      }
      // sex
      if (parseInt(idCard.slice(-2, -1)) % 2 == 1) {
        formData.sex = 1;
      } else {
        formData.sex = 2;
      }
      // birthday
      if (!formData.birth_day) {
        let birthday = "";
        if (idCard.length == 15) {
          birthday = "19" + idCard.substr(6, 6);
        } else if (idCard.length == 18) {
          birthday = idCard.substr(6, 8);
        }
        birthday = birthday.replace(/(.{4})(.{2})/, "$1-$2-");
        if (birthday) {
          formData.birth_year = birthday.slice(0, 4);
          formData.birth_month = birthday.slice(5, 7);
          formData.birth_day = birthday.slice(8, 10);
        }
      }
    };

    //提交
    const btnOk = () => {
      formRef.value
        .validate()
        .then(() => {
          const params = { needMsg: true, ...formData };
          let requestUrl = "/org/user/add";

          if (props.id) {
            requestUrl = "/org/user/edit";
            params.id = props.id;
          } else {
            if (props.scene) {
              params.scene = props.scene;
            }
          }
          state.editLoading = true;
          request
            .post("/village", requestUrl, params)
            .then((res) => {
              message.success(res.msg || "保存成功");
              state.editLoading = false;
              context.emit("success");
              context.emit("onCancel");
              // state.activeTab = 'homebased'
              if (res.data.result) {
                state.homeBasedFormParams = res.data.result;
              }
            })
            .catch(() => {
              state.editLoading = false;
            });
        })
        .catch(() => {
          state.activeTab = "basic";
        });
    };

    const reset = () => {
      formRef.value.resetFields();
      state.homeBasedFormParams = {};
      formData.birth_year = "";
      formData.birth_month = "";
      formData.birth_day = "";
      state.ownerInput = "";
      state.activeTab = "basic";
    };

    //监听id
    watch(
      () => props.visible,
      (val) => {
        if (val) {
          typeList();
          getDetail();
          if (props.ownerInfo.id) {
            formData.owner_id = props.ownerInfo.id;
          } else if (props.ownerId) {
            formData.owner_id = props.ownerId;
          } else {
            formData.owner_id = undefined;
            state.ownerList = [];
          }
        } else {
          reset();
          formData.photo = "";
        }
      }
    );

    const Selectcancel = (id , data) => {
      formData.owner_id = Number(id)
    }

    watch(
      () => state.homeBasedFormParams,
      (val) => {
        if (val.owner_id) {
          state.tabList[1]["disabled"] = false;
        } else {
          state.tabList[1]["disabled"] = true;
        }
      },
      {
        deep: true,
      }
    );

    const showIDCardReader = () => {
      state.IDCardReaderVisible = true;
    };

    const closeIDCardReader = () => {
      state.IDCardReaderVisible = false;
    };

    const confirmIDCardReader = (cardInfo) => {
      console.log(cardInfo);
      formData.name = cardInfo.partyName;
      formData.idcard_type =
        cardInfo.certType == 1
          ? "idcard"
          : cardInfo.certType == 50
          ? "passport"
          : "gangaotai";
      formData.idcard = cardInfo.certNumber;
      formData.sex = cardInfo.gender == 1 ? 1 : 2;
      formData.birth_year = cardInfo.bornDay.slice(0, 4);
      formData.birth_month = cardInfo.bornDay.slice(4, 6);
      formData.birth_day = cardInfo.bornDay.slice(6, 8);
      state.IDCardReaderVisible = false;
    };

    const onReaderConnect = (connected) => {
      state.readerConnected = connected;
    };

    const saveForm = () => {
      context.emit("success", true);
    };

    const successIdPhoto = (data, key) => {
      const { url } = data;
      if (url && key === "front_url") {
        // 读取身份证信息
        request
          .post("/third", "/wxapp/tool/cvOcr/idCard", {
            file: url,
            failNoMsg: true,
          })
          .then((res) => {
            if (res?.idCard?.name && res?.idCard?.id) {
              state.resultInfo = res.idCard;
              state.resultVisible = true;
            }
          });
      }
      formData.idcard_img[key] = url;
    };

    const handleUpdateText = () => {
      formData.name = state.resultInfo.name;
      formData.idcard = state.resultInfo.id;
      if (state.resultInfo?.gender) {
        // 替换性别
        let sex = state.sexList.filter(
          (v) => v.label == state.resultInfo.gender
        );
        if (sex?.length && sex[0]?.value) {
          formData.sex = sex[0].value;
        }
      }
      state.resultVisible = false;
      state.resultInfo = {};
    };

    const handleTextCopy = (item) => {
      utils.copyText(item);
    };

    return {
      diabledOwner,
      ...toRefs(state),
      btnClose,
      btnOk,
      formRef,
      rules,
      formData,
      title,
      idCardInputBlur,
      clearPhoto,
      successPhoto,
      showIDCardReader,
      closeIDCardReader,
      confirmIDCardReader,
      onReaderConnect,
      saveForm,
      successIdPhoto,
      handleUpdateText,
      handleTextCopy,
      Selectcancel,
    };
  },
});

const STATUS_OPTIONS = [
  {
    value: 0,
    label: "待审核",
  },
  {
    value: 1,
    label: "已审核",
  },
  {
    value: 4,
    label: "被拒绝",
  },
];

const tabsHeader = [
  {
    key: "basic",
    text: "基本信息",
  },
  {
    key: "homebased",
    text: "用户详细信息",
    disabled: true,
  },
];
</script>

<style lang="less" scoped>
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.square-size(@a) {
  width: @a;
  height: @a;
}

:deep(.ant-tabs-bar) {
  border-bottom: none !important;
  margin-bottom: 1px;
}
:deep(.ant-tabs-tab) {
  padding: 18px;
}
.form-table-heard:before {
  content: "*";
  color: red;
}
.certificate-upload {
  :deep(.ant-upload-select-picture-card) {
    .square-size(80px);
  }
  :deep(.ant-upload-list-picture-card-container) {
    .square-size(80px);
  }
  :deep(.ant-upload-list-item) {
    .square-size(80px);
  }
}
:deep(.ant-form-item-label > label) {
  width: 100% !important;
}

.photo-card {
  width: 102px;
  height: 102px;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  padding: 8px;
  background: #fafafa;
  border: 1px dashed #d9d9d9;
  margin-right: 5px;

  .img {
    width: 100%;
    height: 100%;
    border-radius: 5px;
  }

  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  .mask {
    position: absolute;
    top: 0px;
    left: 0;
    width: 102px;
    height: 102px;
    border-radius: 5px;
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.4);
    cursor: default;
    .icon {
      color: #fff;
      cursor: pointer;
      font-size: 16px;
    }
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
  }

  &:hover {
    .mask {
      display: flex;
    }
  }
}

.form_item {
  display: flex;
  align-items: center;
  .left_pic {
    width: 32px;
    height: 32px;
    border: 1px solid #eeeeee;
    border-radius: 2px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
    img {
      width: 30px;
      height: 30px;
    }
    .delete_icon {
      display: none;
    }
    &:hover {
      .delete_icon {
        width: 32px;
        height: 32px;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: space-around;
        cursor: pointer;
        position: absolute;
        left: 0;
        top: 0;
      }
    }
  }
  .right_choose {
    position: relative;
    display: inline-block;
    width: 100%;
    padding: 4px 11px;
    font-size: 14px;
    line-height: 20px;
    background-color: #fff;
    background-image: none;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    color: rgba(0, 0, 0, 0.85);
    cursor: pointer;
    margin-left: 3px;
    .placeholder {
      color: rgba(0, 0, 0, 0.32);
    }
  }
}
.card-box {
  width: 156px;
  height: 104px;
  padding: 8px 30px;
  background-color: #f7f7f7;
  margin-right: 16px;
  border-radius: 12px;
  cursor: pointer;
  .card-upload {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    img {
      width: 100%;
      object-fit: contain;
    }
    span {
      font-size: 12px;
    }
  }
}
.card-content {
  display: flex;
}
.card-img {
  width: 156px;
  height: 104px;
  border-radius: 12px;
  padding: 8px;
  background: #fafafa;
  margin-right: 16px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  .img {
    width: 100%;
    object-fit: contain;
    overflow: hidden;
    border-radius: 5px;
  }
  .mask {
    position: absolute;
    top: 0px;
    left: 0;
    width: 156px;
    height: 104px;
    border-radius: 12px;
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.4);
    cursor: default;
    .icon {
      color: #fff;
      cursor: pointer;
      font-size: 16px;
    }
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
  }

  &:hover {
    .mask {
      display: flex;
    }
  }
}
.font-gary {
  color: #999;
}
.tips {
  margin-top: 40px;
  background-color: #f5f7fa;
  line-height: 40px;
  padding: 0 10px;
  .tips-title {
    color: #636467;
  }
}
.icones {
  display: inline-block;
  height: 32px;
  line-height: 32px;
  width: 32px;
  text-align: center;
  color: #888787;
  cursor: pointer;
  border-top: 1px solid #d9d9d9;
  border-right: 1px solid #d9d9d9;
  border-bottom: 1px solid #d9d9d9;
}
</style>
